.saso-main-title {
        font-size: 22px;
        color: #333333;
        font-weight: bold;
        margin-bottom: 25px;
        line-height: 1.6;
    }

    .saso-cards-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
        gap: 20px;
    }

h5.ms-rteElement-sasoH5-Green {
    color: #1B8354 !important;
}
    .saso-card {
        background: #ffffff;
        border: 1px solid #e0e0e0;
        border-radius: 16px; /* انحناء أطراف البطاقة كما في الصورة */
        padding: 24px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.02);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        position: relative;
    }

    .saso-card h3 {
        font-size: 18px;
        color: #2b3a4a;
        font-weight: bold;
        margin-top: 0;
        margin-bottom: 15px;
        line-height: 1.5;
    }

    .saso-card .description {
        font-size: 15px;
        color: #666666;
        line-height: 1.8;
        margin-bottom: 20px;
        text-align: justify;
    }

    .saso-dates-wrapper {
        margin-bottom: 20px;
    }

    .saso-date-row {
        font-size: 16px;
        margin-bottom: 8px;
        display: flex;
        align-items: center;
    }

    .saso-tags-wrapper {
        display: flex;
        flex-wrap: wrap; /* للسماح للمربعات بالنزول لسطر جديد إذا كانت كثيرة */
        gap: 8px;
        margin-bottom: 25px;
    }

    /* تعديل التصنيف ليصبح بمربعات منفصلة زرقاء مطابقة للصورة */
    .saso-badge {
        background-color: #eaf3fc; 
        color: #0d5991; 
        padding: 0px 14px;
        border-radius: 20px;
        font-size: 13px;
        font-weight: bold;
        border: 1px solid #d4e7f7;
        display: inline-block;
    }

    /* تعديل حاوية الأزرار لتصطف جهة اليسار */
    .saso-actions-wrapper {
        display: flex;
        gap: 10px;
        border-top: 1px solid #f0f0f0;
        padding-top: 15px;
        justify-content: flex-end; 
    }

    /* تصغير حجم الأزرار */
    .saso-btn {
        text-align: center;
        padding: 6px 14px; 
        border-radius: 4px;
        font-size: 13px; 
        font-weight: bold;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transition: background-color 0.2s;
        border: 1px solid #cccccc;
        cursor: pointer;
    }

    /* زر للمشاركة */
    .saso-btn-share {
        background-color: #f5f5f5;
        color: #333333;
    }
    .saso-btn-share:hover {
        background-color: #e8e8e8;
    }

    /* زر النتائج والقرارات */
    .saso-btn-pdf {
    background-color: #F3F4F6;
    color: #333333;
    border: 0px;
}    .saso-btn-pdf:hover {
        background-color: #f9f9f9;
    }

    /* إضافة أيقونات مبسطة قبل أزرار الإجراءات */
    .saso-btn-share::before {
        content: "↪";
        margin-left: 6px;
        font-size: 14px;
        display:none;
    }
    .saso-btn-pdf::before {
        content: "📄";
        margin-left: 6px;
        font-size: 13px;
         display:none;
    }
	
    /* الكلاس الخاص بك لتنسيق ألوان التواريخ عريض وأخضر */
    .dColor {
        color: #107c41 !important;
        font-weight: bold !important;
    }
	
	
.topics-container {
       
    }

    .topics-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
        gap: 20px;
    }

    /* تصميم البطاقات الرمادية المماثل للصورة الثانية */
    .topic-card {
        border: 1px solid #e2e8f0;
        border-radius: 12px;
        padding: 24px;
        min-height: 140px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        text-decoration: none;
        color: #333333;
        transition: all 0.2s ease-in-out;
    }

    /* عنوان البطاقة في الأعلى */
    .topic-card h3 {
        font-size: 16px;
        font-weight: bold;
        color: #334155;
        margin: 0 0 15px 0;
    }

    /* منطقة المحتوى الاجتماعي أو الأيقونات داخل البطاقة */
    .topic-card .social-content-area {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 10px;
    }

    /* تنسيق افتراضي لأيقونات السوشيال ميديا المجلوبة من الـ HTML الخاص بك */
    .topic-card .social-content-area ul {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        gap: 15px;
    }

    .topic-card .social-content-area ul li a {
        color: #64748b;
        font-size: 20px;
        text-decoration: none;
    }
    /* التموضع ليكون السهم على اليسار تماماً */
    .card-footer-action {
        display: flex;
        align-items: center;
        justify-content: flex-end; 
    }
    .card-footer-action a {
        color:#ffffff !important;
    }
    /* تحديث الخصائص لتلائم وسم الـ a بالكامل */
    .arrow-btn {
        background-color: #e2e8f0;
        
        width: 32px;
        height: 32px;
        border-radius: 6px;
        display: inline-flex; /* استخدام inline-flex لضبط محاذاة عناصر الرابط الداخلي */
        align-items: center;
        justify-content: center;
        font-size: 14px;
        font-weight: bold;
        cursor: pointer;
        transition: background-color 0.2s;
        text-decoration: none; /* إزالة الخط السفلي الافتراضي */
		
		
			background-color: #1b8354;
			border-radius: 4px; 
			padding: 8px;
			bottom: 25px !important;
			left: 25px;
			height: 30px;
			width: 40px;
        text-decoration: none; /* إزالة الخط السفلي الافتراضي */
    }
    
    .arrow-btn:hover {
                background-color: #166a45 !important;

        text-decoration: none;
    }
	
 .topics-container {
       
    }

    .topics-grid-2 {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 20px;
    }

    /* تصميم البطاقات الرمادية المماثل للصورة الثانية */
    .topic-card {
        border: 1px solid #e2e8f0;
        border-radius: 12px;
        padding: 24px;
        min-height: 140px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        text-decoration: none;
        color: #333333;
        transition: all 0.2s ease-in-out;
    }

    /* عنوان البطاقة في الأعلى */
    .topic-card h3 {
        font-size: 16px;
        font-weight: bold;
        color: #334155;
        margin: 0 0 15px 0;
    }

    /* منطقة المحتوى الاجتماعي أو الأيقونات داخل البطاقة */
    .topic-card .social-content-area {
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 10px;
    }

    /* تنسيق افتراضي لأيقونات السوشيال ميديا المجلوبة من الـ HTML الخاص بك */
    .topic-card .social-content-area ul {
        list-style: none;
        padding: 0;
        margin: 0;
        display: flex;
        gap: 15px;
    }

    .topic-card .social-content-area ul li a {
        color: #64748b;
        font-size: 20px;
        text-decoration: none;
    }



	
	
.saso-tickets-container {
        
    }

    .saso-tickets-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
        gap: 20px;
    }

    /* تصميم البطاقات المماثل تماماً للصورة الأخيرة */
    .saso-ticket-card {
        border: 1px solid #e2e8f0;
        border-radius: 12px;
        padding: 24px;
        min-height: 140px;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        position: relative; /* لتحديد موقع الأيقونة بدقة */
        box-sizing: border-box;
    }

    /* التعديل: نقل الأيقونة لتصبح في أعلى اليمين بدقة */
    .saso-card-icon {
        position: absolute;
        top: 20px;
        right: 20px; /* تم التعديل إلى اليمين لتطابق الصورة */
    }
    .saso-card-icon {
    background-color: #F3FCF6;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    padding: 4px;
}

    .saso-card-icon img {
        width: 32px;
        height: 32px;
        object-fit: contain;
    }

    /* محاذاة العنوان وتوسيطه عمودياً تقريباً بفضل التوزيع */
    .saso-ticket-card h3 {
        font-size: 16px;
        font-weight: bold;
        color: #334155;
        margin: 45px 0 15px 0; /* مسافة علوية متناسقة لترك مساحة مريحة للأيقونة اليمنى */
        text-align: right; /* محاذاة النص لليمين بحسب الصورة */
        line-height: 1.5;
    }

    /* حاوية زر السهم في الأسفل */
    .saso-card-footer {
        display: flex;
        align-items: center;
        justify-content: flex-end; /* وضع السهم على اليسار تماماً */
    }
	
    .saso-card-footer a {
        color:#ffffff !important;
    }

    /* تحديث خصائص الزر ليتوافق مع وسم الـ a دون أي تغيير في الأبعاد */
    .saso-arrow-btn {
        background-color: #e2e8f0;
        color: #64748b;
        width: 32px;
        height: 32px;
        border-radius: 6px;
        display: inline-flex; /* تم الاعتماد على inline-flex لمواءمة الروابط بالشكل الصحيح */
        align-items: center;
        justify-content: center;
        font-size: 14px;
        font-weight: bold;
        cursor: pointer;
        transition: background-color 0.2s;
        text-decoration: none; /* إزالة الخط السفلي التلقائي للروابط */
		
			background-color: #1b8354;
			border-radius: 4px; 
			padding: 8px;
			bottom: 25px !important;
			left: 25px;
			height: 30px;
			width: 40px;
        text-decoration: none; /* إزالة الخط السفلي الافتراضي */
    }
    
    .saso-arrow-btn:hover {
                background-color: #166a45 !important;

        text-decoration: none;
    }
.saso-main-title {
        font-size: 22px;
        color: #333333;
        font-weight: bold;
        margin-bottom: 25px;
        line-height: 1.6;
    }

    .saso-cards-grid {
        display: grid;
        grid-template-columns: repeat(auto-fill, minmax(350px, 1fr));
        gap: 20px;
    }

    .saso-card {
        background: #ffffff;
        border: 1px solid #e0e0e0;
        border-radius: 16px; /* انحناء أطراف البطاقة كما في الصورة */
        padding: 24px;
        box-shadow: 0 2px 4px rgba(0,0,0,0.02);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        position: relative;
    }

    .saso-card h3 {
        font-size: 18px;
        color: #2b3a4a;
        font-weight: bold;
        margin-top: 0;
        margin-bottom: 15px;
        line-height: 1.5;
    }

    .saso-card .description {
        font-size: 15px;
        color: #666666;
        line-height: 1.8;
        margin-bottom: 20px;
        text-align: justify;
    }

    .saso-dates-wrapper {
        margin-bottom: 20px;
    }

    .saso-date-row {
        font-size: 16px;
        margin-bottom: 8px;
        display: flex;
        align-items: center;
    }

    .saso-tags-wrapper {
        display: flex;
        flex-wrap: wrap; /* للسماح للمربعات بالنزول لسطر جديد إذا كانت كثيرة */
        gap: 8px;
        margin-bottom: 25px;
    }

    /* تعديل التصنيف ليصبح بمربعات منفصلة زرقاء مطابقة للصورة */
.saso-badge {
    background-color: #eaf3fc;
    color: #0d5991 !important;
    padding: 0px 14px;
    border-radius: 4px;
    font-size: 12px !important;
    font-weight: bold ! IMPORTANT;
    border: 1px solid #b2DDFF;
    display: inline-block;
}    /* تعديل حاوية الأزرار لتصطف جهة اليسار */
    .saso-actions-wrapper {
        display: flex;
        gap: 10px;
        border-top: 1px solid #f0f0f0;
        padding-top: 15px;
        justify-content: flex-end; 
    }

    /* تصغير حجم الأزرار */
    .saso-btn {
        text-align: center;
        padding: 6px 14px; 
        border-radius: 8px;
        font-size: 13px; 
        font-weight: bold;
        text-decoration: none;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        transition: background-color 0.2s;
        border: 1px solid #cccccc;
        cursor: pointer;
    }

    /* زر للمشاركة */
    .saso-btn-share {
    background-color: #fff;
    color: #333333;
    border: solid 1px #D2D6DB;
}    .saso-btn-share:hover {
        background-color: #e8e8e8;
    }

    /* زر النتائج والقرارات */
    .saso-btn-pdf {
        background-color: #F3F4F6;
        color: #333333;
        border:0px !important;
    }
   .saso-btn-pdf i {
    font-size: 21px;
    padding-left: 4px;
    /*padding-right: 4px;*/
    font-weight: normal;
}
   .saso-btn-share i {
    font-size: 21px;
    padding-left: 4px;
    /*padding-right: 4px;*/
    font-weight: normal;
}

    .saso-btn-pdf:hover {
        background-color: #f9f9f9;
    }

    /* إضافة أيقونات مبسطة قبل أزرار الإجراءات */
    .saso-btn-share::before {
        content: "↪";
        margin-left: 6px;
        font-size: 14px;
    }
    .saso-btn-pdf::before {
        content: "📄";
        margin-left: 6px;
        font-size: 13px;
    }
	
    /* الكلاس الخاص بك لتنسيق ألوان التواريخ عريض وأخضر */
    .dColor {
    color: #1B8354 !important;
    font-weight: bold !important;
}